<script setup lang="ts">
import { ref } from 'vue'
import useQuery from '@/hooks/not_shipped/query'
let formRefRestock: any = ref('formRefRestock') // 抽屉表单对象
let formRefRestock1: any = ref('formRefRestock1') // 抽屉表单对象

const {
    tableData,
    con,
    item,
    caseno,
    handleSearch,
    currentPage4,
    pageSize4,
    total4,
    handler,
    getHasUser,
    exportExcel,
    restock_data,
    dialog,
    rules,
    handleRestock,
    handleReturn,
    handleRestock1,
    dialog1,
    restock_data1,
    rules1,
    handleShipReturn
} = useQuery()



// 退库
async function handleUser() {
    await formRefRestock.value.validate();
    handleReturn();
}

// 发货
async function handleUser1() {
    await formRefRestock1.value.validate();
    handleShipReturn();
}

</script>

<template>
    <el-card>
        <el-form class="form">
            <el-form-item label="合同号:">
                <el-input v-model="con" placeholder="请输入合同号"></el-input>
            </el-form-item>
            <el-form-item label="编码:">
                <el-input v-model="item" placeholder="请输入编码"></el-input>
            </el-form-item>
            <el-form-item label="箱号:">
                <el-input v-model="caseno" placeholder="请输入箱号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch" v-has="`btn_shipped_handleSearch`">搜索</el-button>
                <el-button type="primary" @click="exportExcel" v-has="`btn_shipped_export`">导出Excel</el-button>
                <el-button type="primary" @click="handleRestock1" v-has="`btn_shipped_handleRestock1`">往年合同发货</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar style="height: calc(100vh - 300px);"> <!-- 菜单滚动条 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="ID" label="ID"></el-table-column>
                <el-table-column prop="ContractNo" label="合同号"></el-table-column>
                <el-table-column prop="Item" label="编码"></el-table-column>
                <el-table-column prop="CaseNo" label="箱号"></el-table-column>
                <el-table-column prop="Qty" label="数量"></el-table-column>
                <el-table-column prop="ReturnQty" label="退库数量"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleRestock(scope.row)" v-has="`btn_shipped_handleRestoc`">退库</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <footer style="margin: 10px 0;">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10,20,30,50]"
                background layout="total, sizes, prev, pager, next, jumper" :total="total4"
                @size-change="handler" @current-change="getHasUser" />
        </footer>
    </el-card>


     <!-- 抽屉 退库 -->
    <el-drawer ref="drawerRef" v-model="dialog" title="退库" class="demo-drawer">
        <el-form ref="formRefRestock" :model="restock_data" :rules="rules" label-width="80px">
            <el-form-item label="ID">
                <el-input v-model="restock_data.ID" disabled></el-input>
            </el-form-item>
            <el-form-item label="合同号">
                <el-input v-model="restock_data.ContractNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="restock_data.Item" disabled></el-input>
            </el-form-item>
            <el-form-item label="箱号">
                <el-input v-model="restock_data.CaseNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="restock_data.Qty" disabled></el-input>
            </el-form-item>
            <el-form-item label="已退数量">
                <el-input v-model="restock_data.ReturnQty" disabled></el-input>
            </el-form-item>
            <el-form-item label="退库数量" prop="yes_qty">
                <el-input v-model="restock_data.yes_qty" placeholder="请输入退库数量"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认退库?" @confirm="handleUser">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="dialog=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    <!-- 抽屉 发货 -->
    <el-drawer ref="drawerRef1" v-model="dialog1" title="发货" class="demo-drawer">
        <el-form ref="formRefRestock1" :model="restock_data1" :rules="rules1" label-width="80px">
            <el-form-item label="合同号" prop="ContractNo">
                <el-input v-model="restock_data1.ContractNo" placeholder="请输入要发货的合同号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
                    icon-color="#626AEF" title="是否确认发货?" @confirm="handleUser1">
                    <template #reference>
                        <el-button type="primary">提交</el-button>
                    </template>
                </el-popconfirm>

                <el-button type="danger" @click="dialog1=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>




</template>


<style scoped lang="scss">
.form {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>